<template>
  <wd-config-provider :theme-vars="themeVars" v-bind="showConfigProviderProps">
    <view class="absolute top-0 left-0 bottom-0 right-0 pointer-events-none">
      <!-- 根据传入的背景类型显示不同的背景 -->
      <template v-if="bgType === 'image'">
        <view class="w-full h-full" :style="{ backgroundColor: bgColor }">
          <image
            class="w-full"
            :src="bgImage || freeConfig.bgImage"
            mode="widthFix"
          />
        </view>
      </template>
      <template v-else-if="bgType === 'color'">
        <view
          class="w-full h-full"
          :style="{ backgroundColor: bgColor }"
        ></view>
      </template>
    </view>
    <view :class="[customClass]" :style="customStyle">
      <free-navbar v-if="showNavbar" :navbar="navbar"></free-navbar>

      <view
        class="relative"
        :class="[customBodyClass]"
        :style="customBodyStyle"
      >
        <slot></slot>
      </view>
    </view>
    <wd-message-box />
    <slot name="extra"></slot>
  </wd-config-provider>
</template>

<script setup name="FreeLayout">
import { lightTheme } from "@/styles/variables.js";
import { objToStyle } from "@/utils/index.js";
import _ from "lodash";
import { computed, reactive, watch } from "vue";
import { freeConfig } from "../config";
import { getDefaultProps } from "../defaultProps";

const props = defineProps({
  ...getDefaultProps(),
  customBodyClass: {
    type: String,
    default: "",
  },
  customBodyStyle: {
    type: String,
    default: "",
  },
  navbar: {
    type: Object,
    default() {
      return {};
    },
  },
  showNavbar: {
    type: Boolean,
    default: true,
  },
  configProvider: {
    type: Object,
    default() {
      return {};
    },
  },
  skeleton: {
    type: Object,
    default() {
      return {};
    },
  },
  bgType: {
    type: String,
    default: "", // 可选值: 'image', 'color', 空值表示使用默认
    validator: (value) => ["", "image", "color"].includes(value),
  },
  bgImage: {
    type: String,
    default: "",
  },
  bgColor: {
    type: String,
    default: "#ffffff",
  },
});

// 覆盖wot design
const themeVars = reactive({
  buttonMediumRadius: lightTheme.rounded[1],
  colorTheme: lightTheme.primary[6],
  colorText: lightTheme.colorText[1],
  colorTextSecondary: lightTheme.colorText[2],
  colorTextPlaceholder: lightTheme.colorText[3],
  colorBgContainer: lightTheme.fill[1],
  colorBgContainerLight: lightTheme.fill[2],
  colorBorder: lightTheme.fill[3],
});

// free变量css
const mapFreeThemeVarsToCSSVars = () => {
  const cssVars = {};
  _.forEach(lightTheme, (value, key) => {
    _.forEach(value, (v, k) => {
      cssVars[`--free-${_.kebabCase(key)}-${k}`] = v;
    });
  });
  return cssVars;
};

const showConfigProviderProps = computed(() => {
  const styleObj = mapFreeThemeVarsToCSSVars();
  const themeStyle = styleObj
    ? `${objToStyle(styleObj)};${props.configProvider?.customStyle || ""}`
    : props.configProvider?.customStyle || "";
  // console.log("free变量css字符串", themeStyle);
  return {
    ...props.configProvider,
    customStyle: themeStyle,
  };
});

// 全局分享
uni.showShareMenu({
  withShareTicket: true,
  menus: ["shareAppMessage", "shareTimeline"],
});
</script>
